<template>
	<div class="home col-f fillDiv">
		<div class="title text-center">
			<div class="container">
				<div class="row">
					<div class="col-xs-6">
						<div class="box">
							<img width="100%" src="../../static/img/home/sybanner_kuang.png"/>
							<h1>NEVER SETTLE</h1>
						    <span>这颗行星上·好用的公链</span>
						</div>
					</div>
					<div class="col-xs-6">
						<img width="60%" src="../../static/img/home/zanshi.png"/>
					</div>
				</div>
			</div>
		</div>
		<img width="100%" height="100%" class="bg-img" src="../../static/img/bg/pic_sy_banner_yuansu.png"/>
	</div>
</template>

<script>
	import { fill } from '~/static/js/common.js';
	export default {
	    data () {
		    return {

		    }
	    },
	    mounted () {
		  	fill('fillDiv')
	    },
	    methods : {

	    }
    }
</script>

<style scoped="scoped">
	.home{background: #261452;position: relative;display: table;width: 100%;}
	.title{display: table-cell;vertical-align: middle;}
	.bg-img{position: absolute;left: 0;top: 0;}
	.span{margin: 300px auto;letter-spacing: 5px;font-size: 50px;}
	.box{width:200px;height:200px;position: relative;top: 100px;}
	.box h1{position: absolute;top:30px;right: -140px;}
	.box span{position: absolute;bottom: 40px;right: -140px;font-size: 22px;padding: 10px 20px;background: -webkit-linear-gradient(left, #4fc6fc , #4f3bf4); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right,#4fc6fc , #4f3bf4); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #4fc6fc , #4f3bf4); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #4fc6fc , #4f3bf4); /* 标准的语法 */}
</style>
